<template>
  <div id="forget-index">
    <div class="content-forget">
      <div class="forget-row">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="$t('auth.forget.cellphoneNumber') " name="first">
            <el-form v-if="activeName == 'first'" :model="formObj" :rules="mobileRules" ref="mobileRef">
              <el-form-item prop="mobile">
                <el-input v-model="formObj.mobile" :placeholder="$t('auth.forget.iPhoneNumber') ">
                  <template slot="prepend">
                    <i class="iconfont iconzhanghao"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="formObj.password" autocomplete="off" :placeholder="$t('auth.forget.iLoginPassword') ">
                  <template slot="prepend">
                    <i class="iconfont iconmima"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="captcha_code" >
                <el-input v-model="formObj.captcha_code" autocomplete="off" :placeholder="$t('auth.forget.iVerificationCode') " maxlength="4">
                  <template slot="prepend">
                    <i class="iconfont iconyanzhengma"></i>
                  </template>
                  <template slot="append">
                    <img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item><el-button type="primary" @click="submitForm('mobileRef')"> {{ $t('auth.forget.resetPassword') }}</el-button></el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane :label="$t('auth.forget.eMail') " name="second">
            <el-form v-if="activeName == 'second'" :model="emailForm" :rules="emailRuels" ref="emailRef">
              <el-form-item prop="email">
                <el-input v-model="emailForm.email" :placeholder="$t('auth.forget.pleaseEnterYourEmail') ">
                  <template slot="prepend">
                    <i class="iconfont iconzhanghao"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="emailForm.password" autocomplete="off" :placeholder="$t('auth.forget.iLoginPassword') ">
                  <template slot="prepend">
                    <i class="iconfont iconmima"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="captcha_code" >
                <el-input v-model="emailForm.captcha_code" autocomplete="off" :placeholder="$t('auth.forget.iVerificationCode') " maxlength="4">
                  <template slot="prepend">
                    <i class="iconfont iconyanzhengma"></i>
                  </template>
                  <template slot="append">
                    <img :src="captcha.img" mode class="captcha" @click="getCaptcha" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item><el-button type="primary" @click="submitForm('emailRef')"> {{ $t('auth.forget.resetPassword') }}</el-button></el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { captcha } from "@/api/website"
import { forgetTell , forgetEmail} from "@/api/auth/login"
export default {
  data() {
    return {
      activeName: 'first',
      formObj: {
				mobile: '',
				password: '',
				captcha_code: '',
				captcha_id: '',
			},
      mobileRules: {
        mobile: [{
            required: true,
            message: this.$t('auth.forget.iPhoneNumber'),
			trigger: "blur"
        }],
        password: [{
          required: true,
					message: this.$t('auth.forget.iLoginPassword'),
					trigger: "blur"
        }],
        captcha_code: [{
          required: true,
					message: this.$t('auth.forget.iVerificationCode'),
					trigger: "blur"
        }]
      },
      emailRuels: {
        email: [{
          required: true,
					message: this.$t('auth.forget.pleaseEnterYourEmail'),
					trigger: "blur"
        }],
        password: [{
          required: true,
					message: this.$t('auth.forget.iLoginPassword'),
					trigger: "blur"
        }],
        captcha_code: [{
          required: true,
					message: this.$t('auth.forget.iVerificationCode'),
					trigger: "blur"
        }]
      },
      captcha: {
				id: "",
				img: ""
			}, // 验证码
      emailForm: {
        email: '',
				password: '',
				captcha_code: '',
				captcha_id: '',
      },
    };
  },
  created() {
      this.mobileRules.mobile = [{
          required: true,
          message:this.$t('auth.forget.iPhoneNumber'),
          trigger: "blur"
      }]
      this.mobileRules.password = [{
          required: true,
          message:this.$t('auth.forget.iLoginPassword'),
          trigger: "blur"
      }]
      this.mobileRules.captcha_code = [{
          required: true,
          message:this.$t('auth.forget.iVerificationCode'),
          trigger: "blur"
      }]
      this.mobileRules.emailRuels = [{
          required: true,
          message:this.$t('auth.forget.pleaseEnterYourEmail'),
          trigger: "blur"
      }]



      this.getCaptcha();
  },
  mounted() {

  },
  methods: {
    /**
		 * 获取验证码
		 */
		getCaptcha() {
			captcha({
        captcha_id: this.captcha.id
      })
      .then(res => {
        if (res.code >= 0) {
          this.captcha.id = res.data.id
          this.captcha.img = res.data.img
          this.captcha.img = this.captcha.img.replace(/\r\n/g, "")
          if(this.activeName == 'first'){
            this.formObj.captcha_id = this.captcha.id;
          }else {
            this.emailForm.captcha_id = this.captcha.id
          }
        }
      })
      .catch(err => {
        this.$message.error(err.message)
      })
		},
    handleClick(){
      this.getCaptcha();
    },
    submitForm(refName){

      this.$refs[refName].validate(valid=> {
        if(valid){
          let data = this.activeName == 'first' ? this.formObj : this.emailForm;
          console.log(JSON.stringify(data))
          if(this.activeName == 'first'){
            this.submitTel(data);
          }else {
            this.submitEmail(data);
          }
        }else {
          return false;
        }
      })
    },
    submitTel(data){
      forgetTell(data).then(res=>{
        if(res.code == 0){
          this.$message.success('重置成功')
          this.$router.replace({path: '/login'})
        }else {
          this.getCaptcha()
          this.$message({
            message: res.message,
            type: "warning"
          })
        }
      }).catch(err => {
        this.$message.error(err.message)
        this.getCaptcha()
      })
    },
    submitEmail(data){
      forgetEmail(data).then(res=>{
        if(res.code == 0){
          this.$message.success('重置成功')
          this.$router.replace({path: '/login'})
        }else {
          this.getCaptcha()
          this.$message({
            message: res.message,
            type: "warning"
          })
        }
      }).catch(err => {
        this.$message.error(err.message)
        this.getCaptcha()
      })
    },
  }
};
</script>

<style lang="scss">
  #forget-index {
    .el-tabs__active-bar,
    .el-tabs__nav-wrap::after {
      /* 清除tab标签底部横线 */
      height: 0;
    }
  }
</style>

<style scoped lang="scss">
  .content-forget {
    width: 100%;
    .forget-row {
      width: 400px;
      margin: 0 auto;
    }
    .el-form {
      .captcha {
        vertical-align: top;
        max-width: inherit;
        max-height: 38px;
        line-height: 38px;
        cursor: pointer;
      }
      button {
				width: 100%;
			}
    }
  }
</style>
